<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;}
        .bg-red{background: red;}
        .border{border: solid 10px black;}
        .fs-30{font-size: 30px;}
    </style>
</head>
<body>
    <input type="text" id="search">
    <input type="button" id="btn" value="搜索">
    <ul class="list">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>php</li>
        <li>mysql</li>
        <li>nodejs</li>
        <li>mongodb</li>
        <li>python</li>
    </ul>
    <ul class="list">
        <li>html</li>
        <li>css</li>
        <li class="mark">javascript</li>
        <li>php</li>
        <li>mysql</li>
        <li>nodejs</li>
        <li>mongodb</li>
        <li>python</li>
    </ul>
    <div class="box">盒子</div>
    <div class="box1">
        <em>hello</em>
    </div>
    <div class="box2">
        <em>world</em>
    </div>
    <input type="text" class="txt" value="123123">
</body>
<script src="../jquery.js"></script>
<script>
    
    // 元素内容操作
    // 传参为设置，不传参为获取
    // console.log($(".box1").html())
    // $(".box1").html("<b>文字1</b>")
    // console.log($(".box2").text())
    // $(".box2").text("<b>文字2</b>")
    // console.log($(".txt").val())
    // $(".txt").val("文字")

    // =========

    // class操作
    // $(".box").addClass("bg-red")
    // $(".box").addClass("border fs-30")
    
    // $(".box").removeClass("fs-30 bg-red")

    // document.onclick = function(){
    //     $(".box").toggleClass("bg-red");
    // }

    // =========

    // $(".box").append($("<div>hello</div>"));
    // $("<div>").appendTo($(".box"));

    // $(".box").prepend($("<div>hello</div>"));
    // $("<div>hello</div>").prependTo($(".box"))

    // $(".box").after($("<div>"))
    // $(".box").before($("<div>"))

    // $(".box").clone() 等价于创建了一个新元素，需要插入页面后才能看到
    // 只克隆DOM
    // $(".box").clone().appendTo($("body"));
    // 不仅克隆DOM，还克隆事件流（jq的事件）
    // $(".box").clone(true).appendTo($("body"));

    // 修改元素
    // $(".box").replaceWith("<span>"+ $(".box").html() +"</span>")

    // 删除元素
    // $(".box").remove()


    // =========

    // 选择器补充
    // $("#btn")[0].onclick = function(){
    //     $('.list li').css({background:""});

    //     $('.list li:contains('+ $("#search").val() +')').css({background:"red"})
    // }

    // $('.list:has(.mark)').css({border:"solid 2px black"});

    // =======

    // 判断元素是否具有某个选择器
    // 即可判断class，也可判断id
    // console.log($(".box").is(".box"))
    // console.log($(".box").is(".red"))
    // console.log($(".box").is("#red"))
    // 只能判断class
    // console.log($(".box").hasClass("red"))
    
    

</script>
</html>